<template>
  <div class="list-page">
    
    <h3 style="text-align: center;">个人总积分排名</h3>
    <Table
      border
      :loading="bloc.loading"
      :columns="columns"
      highlight-row
      :data="bloc.paged.items"
      @on-selection-change="(selection) => (bloc.memberSelectArr = selection)"
    >
      <slot name="footer" slot="footer">
        <Page
          show-elevator
          show-total
          show-sizer
          :total="bloc.paged.itemCount"
          :current="bloc.paged.pageIndex"
          :page-size="bloc.paged.pageSize"
          :page-size-opts="[15, 30, 50, 100]"
          @on-change="(val) => bloc.load(val, bloc.paged.pageSize)"
          @on-page-size-change="(val) => bloc.load(bloc.paged.pageIndex, val)"
        />
      </slot>
    </Table>
    <h3 style="text-align: center;margin-top: 40px;">个人签到积分排名</h3>
    <Row>
      <div class="toolbar">
        <!-- <Input
          placeholder="昵称"
          v-model="bloc.form3.nickname"
          style="width: 180px; margin-right: 10px"
        />
        <Input
          placeholder="手机"
          v-model="bloc.form3.phone"
          style="width: 180px; margin-right: 10px"
        /> -->
        <Select
          v-model="bloc.form3.sortProperties"
          style="width: 200px; margin-right: 10px"
          placeholder="排名分类"
        >
          <Option
            v-for="item in bloc.sortList2"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <Select
          v-model="bloc.form3.sortDirection"
          style="width: 200px; margin-right: 10px"
          placeholder="升降序"
        >
          <Option
            v-for="item in bloc.sortList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>

        <Button
          type="primary"
          icon="ios-search"
          style="margin-right: 10px"
          size="default"
          @click="bloc.load3(1, bloc.paged3.pageSize)"
          >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="bloc.reset3()"
          >重置</Button
        >
      </div>
    </Row>
    <Table
      border
      :loading="bloc.loading3"
      :columns="columns3"
      highlight-row
      :data="bloc.paged3.items"
      @on-selection-change="(selection) => (bloc.memberSelectArr3 = selection)"
    >
      <slot name="footer" slot="footer">
        <Page
          show-elevator
          show-total
          show-sizer
          :total="bloc.paged3.itemCount"
          :current="bloc.paged3.pageIndex"
          :page-size="bloc.paged3.pageSize"
          :page-size-opts="[15, 30, 50, 100]"
          @on-change="(val) => bloc.load3(val, bloc.paged3.pageSize)"
          @on-page-size-change="(val) => bloc.load3(bloc.paged3.pageIndex, val)"
        />
      </slot>
    </Table>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Route } from "vue-router";
import { ListBloc } from "@/view/member/bloc/StatisticsBloc";
import { Member } from "@/base/model/Member";
import { formatDate } from "@/base/util/Dates";
import CompanySelector from "@/component/CompanySelector.vue";
import { Validation } from "@/base/Validation";
import { Resources } from "@/base/Resources";
import { isEmpty } from "@/base/util/Strings";
import { store } from "@/store/Store";

const columns = (bloc: ListBloc) => [
  {
    type: "selection",
    width: 40,
    align: "left",
  },
  // {
  //   title: '所属品牌商',
  //   key: 'companyId',
  //   render: (h: any, params: any) => {
  //     return h('span', {
  //       domProps: {
  //         innerText: bloc.getCompanyName(params.row.companyId)
  //       }
  //     });
  //   },
  //   align: 'left',
  //   minWidth: 220,
  //   tooltip: true
  // },
  {
    title: "昵称",
    key: "nickname",
    align: "left",
    minWidth: 120,
    tooltip: true,
  },
  {
    title: "手机",
    key: "phone",
    align: "left",
    minWidth: 120,
    tooltip: true,
  },
  {
    title: "积分",
    key: "point",
    align: "left",
    minWidth: 120,
    tooltip: true,
  },
];
const columns3 = (bloc: ListBloc) => [
  {
    type: "selection",
    width: 40,
    align: "left",
  },
  // {
  //   title: '所属品牌商',
  //   key: 'companyId',
  //   render: (h: any, params: any) => {
  //     return h('span', {
  //       domProps: {
  //         innerText: bloc.getCompanyName(params.row.companyId)
  //       }
  //     });
  //   },
  //   align: 'left',
  //   minWidth: 220,
  //   tooltip: true
  // },
  {
    title: "排名",
    key: "serial_number",
    align: "left",
    minWidth: 120,
    tooltip: true,
  },
  {
    title: "手机",
    key: "phone",
    align: "left",
    minWidth: 120,
    tooltip: true,
  },
  {
    title: "昵称",
    key: "nickname",
    align: "left",
    minWidth: 120,
    tooltip: true,
  },
  {
    title: "签到次数",
    key: "number",
    align: "left",
    minWidth: 120,
    tooltip: true,
  },
  {
    title: "积分",
    key: "integral",
    align: "left",
    minWidth: 120,
    tooltip: true,
  },
];

@Component({
  components: {
    CompanySelector,
  },
})
export default class extends Vue {
[x: string]: any;
  beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
    next((vm) => {
      vm.bloc
        .load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize)
        .catch((e) => {
          vm.$Message.error("操作错误");
        });
      vm.bloc
        .load3(vm.bloc.paged3.pageIndex, vm.bloc.paged3.pageSize)
        .catch((e) => {
          vm.$Message.error("操作错误");
        });
      vm.tepee;
    });
  }

  bloc: ListBloc = new ListBloc();
  columns = columns(this.bloc);
  columns3 = columns3(this.bloc);
  Validation = Validation;
  Resources = Resources;

  get tepee() {
    return store.state.user.tepee;
  }

  modifyItem(dataItem: Member) {
    this.$router.replace(`/member/${dataItem.id}`);
  }
  //积分明细
  integral(row: any) {
    this.$router.push({
      path: `/member/Point/${row.id}`,
      query: {
        phone: row.phone,
      },
    });
  }


  onSelectChange(selection) {
    this.bloc.memberSelectArr = selection;
  }
}
</script>

<style lang="less"></style>
